<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { fetchProjectDetail, addProject, updateProject } from '@/service/api';

defineOptions({
  name: 'ProjectOperateDrawer'
});

interface Props {
  operateType: 'add' | 'edit';
  rowId?: number;
}

const props = defineProps<Props>();

interface Emits {
  (e: 'success'): void;
}

const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', { required: true });

const { formRef, validate } = useNaiveForm();
const { defaultRequiredRule } = useFormRules();

const title = computed(() => (props.operateType === 'add' ? '新建项目' : '编辑项目'));

const model = ref<Api.Dataplatform.ProjectEdit>({
  name: '',
  code: '',
  description: '',
  ownerId: 0,
  ownerName: '',
  status: 1,
  startDate: null,
  endDate: null,
  remark: ''
});

const rules = {
  name: defaultRequiredRule,
  code: defaultRequiredRule,
  ownerId: defaultRequiredRule
};

const submitLoading = ref(false);

async function handleInitModel() {
  if (props.operateType === 'edit' && props.rowId) {
    const { data, error } = await fetchProjectDetail(props.rowId);
    if (!error && data) {
      Object.assign(model.value, data);
    }
  } else {
    Object.assign(model.value, {
      name: '',
      code: '',
      description: '',
      ownerId: 0,
      ownerName: '',
      status: 1,
      startDate: null,
      endDate: null,
      remark: ''
    });
  }
}

async function handleSubmit() {
  await validate();
  submitLoading.value = true;

  const api = props.operateType === 'add' ? addProject : updateProject;
  const { error } = await api(model.value);

  submitLoading.value = false;

  if (!error) {
    window.$message?.success(props.operateType === 'add' ? '创建成功' : '更新成功');
    emit('success');
  }
}

watch(visible, val => {
  if (val) {
    handleInitModel();
  }
});
</script>

<template>
  <NDrawer v-model:show="visible" :title="title" display-directive="show" :width="600">
    <NDrawerContent :title="title" closable>
      <NForm ref="formRef" :model="model" :rules="rules" label-placement="left" :label-width="100">
        <NFormItem label="项目名称" path="name">
          <NInput v-model:value="model.name" placeholder="请输入项目名称" />
        </NFormItem>
        <NFormItem label="项目编码" path="code">
          <NInput v-model:value="model.code" placeholder="请输入项目编码" :disabled="operateType === 'edit'" />
        </NFormItem>
        <NFormItem label="项目描述" path="description">
          <NInput
            v-model:value="model.description"
            type="textarea"
            placeholder="请输入项目描述"
            :rows="3"
          />
        </NFormItem>
        <NFormItem label="负责人ID" path="ownerId">
          <NInputNumber v-model:value="model.ownerId" placeholder="请输入负责人ID" class="w-full" />
        </NFormItem>
        <NFormItem label="负责人姓名" path="ownerName">
          <NInput v-model:value="model.ownerName" placeholder="请输入负责人姓名" />
        </NFormItem>
        <NFormItem label="开始日期" path="startDate">
          <NDatePicker v-model:formatted-value="model.startDate" type="date" value-format="yyyy-MM-dd" class="w-full" />
        </NFormItem>
        <NFormItem label="结束日期" path="endDate">
          <NDatePicker v-model:formatted-value="model.endDate" type="date" value-format="yyyy-MM-dd" class="w-full" />
        </NFormItem>
        <NFormItem label="备注" path="remark">
          <NInput
            v-model:value="model.remark"
            type="textarea"
            placeholder="请输入备注"
            :rows="2"
          />
        </NFormItem>
      </NForm>

      <template #footer>
        <NSpace justify="end">
          <NButton @click="visible = false">取消</NButton>
          <NButton type="primary" :loading="submitLoading" @click="handleSubmit">提交</NButton>
        </NSpace>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>
